<route lang="json">
{
  "meta": {
    "title": "t('longHuBang')"
  }
}
</route>
<script setup lang="ts">
import { apiRankingList, RankingList } from "@@/api/transaction/list";
import { fixedDecimals, omitText } from "@@/utils/tools/format";
interface ItemSlot {
  index: number;
  item: RankingList.ResItem;
}
const env = import.meta.env;
function toDetails(address: string) {
  window.open(`${env.VITE_BLOCK_EXPLORER_URL}/address/${address}`);
}
</script>

<template>
  <CpageView>
    <CrequestList :api="(apiRankingList as any)" is-one-page>
      <template #header>
        <Cgrid
          class="PD-xs border-T border-B"
          style="--BOc: #fff"
          col="3"
          repeat="1fr"
        >
          <div>{{ $t("paiMing") }}</div>
          <div>{{ $t("diZhi") }}</div>
          <div>{{ $t("jinE") }}</div>
        </Cgrid>
      </template>

      <template #item="{ item }: ItemSlot">
        <Cgrid class="PD-xs MT-sm" col="3" repeat="1fr">
          <div class="rank">{{ item.rank }}</div>
          <div @click="toDetails(item.show)">
            {{ item.address }}
          </div>                                  
          <div>{{ fixedDecimals(item.money) }}</div>
        </Cgrid>
      </template>
    </CrequestList>
  </CpageView>
</template>

<style lang="scss" scoped>
.rank {
  --size: 60rem;
  height: var(--size);
  line-height: var(--size);
  width: var(--size);
  text-align: center;
  background-color: var(--C-M1-O1);
}
</style>
